iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 14
0
Modern Web

被 React react 的後端工程師系列 第 14

[DAY14] 一個蘿蔔一個坑之 JSX 幾個坑

  • 分享至 

  • xImage
  •  

我想說的是
JSX 註解的寫法和一般的 HTML 不一樣

寫程式不寫註解,就像是大腸麵線沒加香菜
雖然能,但吃就是少一味;還有些人特別討厭加
寫註解還是有些好處的,畢竟你三個月後可能就忘了當初自己在寫什麼

註解的坑

第一次寫JSX註釋,直覺上來說會這樣寫,當然這樣寫是完全不對的

return  (
  <>
  // 這是個錯誤的註解寫法
    <div>
      <input 
        value={this.state.newServiceName}
        onChange={this.inputChange}
      />
      <button
        onClick={this.addService}
      >
        增加服務
      </button>
    </div>

在 JSX 中註解可以有兩種寫法
當然我最建議的還是利用編輯器內建的快捷鍵,一般是 ctrl+/ 或是 cmd+/

可以理解成,在 JSX 中加入 javascript 程式,所以用大括號來表示

return  (
  <>
  {/* 正確註釋的寫法 */}
  {
    //正確註釋的寫法 
  }
    <div>
      <input 
        value={this.state.newServiceName}
        onChange={this.inputChange}
      />
      <button
        onClick={this.addService}
      >
        增加服務
      </button>
    </div>

CSS 的坑

錯誤加入 class 範例

<input
  class="input_box"
  value={this.state.newServiceName}
  onChange={this.inputChange}
/>

雖然畫面是可以正常顯示結果的,但是如果打開開發者工具會看見 Warning 警告
index.js:1437 Warning: Invalid DOM property 'class'. Did you mean 'className'?

意思就是要把class換成className
為了防止 javascript 中 class 物件衝突,所以要求開發者換掉

html parser

一般來說為了避免使用者亂輸入,都會自動帶有一個 parser
把特殊字元轉碼,這個後端就很清楚是什麼東西
而 JSX 也有一樣的保護,但是我今天就是想插入的時候怎麼辦呢?
可以使用 dangerouslySetInnerHTML 就代表

我知道危險,但還是要插

<li 
  key={index+massageService}
  onClick={()=>this.deleteService(index)}
  dangerouslySetInnerHTML={{__html:massageService}}
>

label 標籤

使用 label 可以讓使用者不一定要點到輸入框,只要點到 label
就可以有點到輸入框一樣的效果

<div>
    <label for="serviceInput">加入服務:</label>
    <input
      id="serviceInput"
      className="input_box" 
      value={this.state.newServiceName}
      onChange={this.inputChange}
    />
    <button onClick={this.addService}> 增加服務 </button>
</div>

同樣的出現 console 警告
因為他會和 javascript 中的 for 迴圈混淆,所以提示使用 htmlfor

這些算是目前為止可能會遇到的坑,並且也算是常見的初學者地雷


上一篇
[DAY13] Filter 標題的靈感之我真的一滴都不剩了之真想不出
下一篇
[DAY15] 組件的拆分
系列文
被 React react 的後端工程師30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言